<template>
	<view class="home">
		<view class="top_ganke"></view>
		<view class="header_top">
			<img :src="bg" mode="" class="images" />
		</view>
		<view class="sky"></view>
		<view class="bianjie">
			<view class="bianjie_logoimg">
				<img :src="extuiHL" class='images' alt="">
			</view>
			<view class="bianjie_navigation">
				<p class='bianjie_text'>犬证服务</p>
				<p class='bianjie_English'>Convenient function</p>
			</view>
		</view>
		<view class="content">
			<view class="content_views  _right_views" :class="this.Label[0].back_class" @click="select_flag(0)">
				<view class="content_views_img">
					<img :src="extuiHL" class='images' alt="">
				</view>
				<view class="content_views_text" :class="this.Label[0].color_class">
					<p class='_views_text_val'>申办犬证</p>
					<p class='_views_text_english'>Apply for a dog</p>
				</view>
			</view>
			<view class="content_views content_right_ _left_views" :class="this.Label[1].back_class" @click="select_flag(1)">
				<view class="content_views_img">
					<img :src="extuiHL" class='images' alt="">
				</view>
				<view class="content_views_text" :class="this.Label[1].color_class">
					<p class='_views_text_val'>电子犬证</p>
					<p class='_views_text_english'>Canine syndrome</p>
				</view>
			</view>
		</view>
		<view class="content martop">
			<view class="content_views _right_views" :class="this.Label[2].back_class" @click="select_flag(2)">
				<view class="content_views_img">
					<img :src="extuiHL" class='images' alt="">
				</view>
				<view class="content_views_text" :class="this.Label[2].color_class">
					<p class='_views_text_val'>养犬时事</p>
					<p class='_views_text_english'>current affairs</p>
				</view>
			</view>
			<view class="content_views content_right_ _left_views" :class="this.Label[3].back_class" @click="select_flag(3)">
				<view class="content_views_img">
					<img :src="extuiHL" class='images' alt="">
				</view>
				<view class="content_views_text" :class="this.Label[3].color_class">
					<p class='_views_text_val'>执法记录</p>
					<p class='_views_text_english'>recording</p>
				</view>
			</view>
		</view>
		<NAUIcard :listData="detail"></NAUIcard>
	</view>
</template>
<script>
	import bg from '@/static/bg.jpg'
	import extuiHL from '@/static/extuiHL.png'
	import NAUIcard from '@/components/NAUI-card/NAUI-card.vue'

	import boda from '@/static/doghospital/boda.jpg'
	import dazuigou from '@/static/doghospital/dazuigou.jpg'
	import guanhuai from '@/static/doghospital/guanhuai.jpg'
	import kanghe from '@/static/doghospital/kanghe.jpg'

	export default {

		props: {},
		components: {
			NAUIcard
		},
		data() {
			return {
				detail: [
					{
					"id": "0",
					"content": "卡片文字内容",
					"img_url": [
						"http://img.nauzone.cn/78764bea5a2c8828b433d7b050bcc5a4",
						boda,
						"http://img.nauzone.cn/778a955fdc252fb432c68f1247835b12",
						"http://img.nauzone.cn/4068d8d16c125a2ab76089166adf0903",
						"http://img.nauzone.cn/73eb04f0d7d426d96de6f356f181da5e"
					],
					"user_name": "富士康宠物医院",
					"mark": true,
					"type": "表白墙",
					"points": "0",
					"show_times": "0",
					"creat_time": '2019-02-24',
					"anony": false,
					"avatarurl": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-android.png"
				}, ],
				bg,
				extuiHL,
				color_class: '', // Clickdown  Outsideoneself
				Label: [{
						back_class: 'OutsideoneselfBack',
						color_class: 'OutsideoneselfColor'
					},
					{
						back_class: 'OutsideoneselfBack',
						color_class: 'OutsideoneselfColor'
					},
					{
						back_class: 'OutsideoneselfBack',
						color_class: 'OutsideoneselfColor'
					},
					{
						back_class: 'OutsideoneselfBack',
						color_class: 'OutsideoneselfColor'
					},
				]
			}
		},
		methods: {
			select_flag(item) {
				this.Label.forEach((item) => {
					item.back_class = 'OutsideoneselfBack';
					item.color_class = 'OutsideoneselfBack';
				})
				// .OutsideoneselfBack{
				// 	background:white;
				// }
				// .OutsideoneselfColor{
				// 	background: #464c5b;
				// }
				this.Label[item].back_class = 'ClickdownBack';
				this.Label[item].color_class = 'ClickdownColor';

			}
		},
		watch: {},

		onReachBottom() { //页面上拉触底事件的处理函数

		},
		onPullDownRefresh() { //监听用户下拉动作，一般用于下拉刷新
			//需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			//uni.startPullDownRefresh(); 开启
			// uni.stopPullDownRefresh(); 关闭
		},
		onUnload() { //监听页面卸载

		},
		onHide() { //监听页面隐藏

		},
		onLoad() { // 替代 created 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例

		},
		onReady() { //替代 mounted 监听页面初次渲染完成

		},

		onShow() { //监听页面显示
			//生命周期
		}
	}
</script>
<style lang="scss" scoped>
	/******************** 顶部****************************************/
	$bg:#1cbbb4; //项目组色调
	$zuanzhong:#9071ff; //点击选中
	$texts:#464c5b; //字体颜色

	.home {
		width: 100%;
		height: 100%;
	}

	.top_ganke {
		width: 100%;
		height: 80upx;
		// background:$bg;
	}

	.header_top {
		width: 100%;
		height: 350upx;

		// background: $bg;
		.images {
			width: 100%;
			height: 100%;
			background: 100% 100%;
		}
	}

	.sky {
		width: 100%;
		height: 100upx;
	}

	/****************** 便捷服务 *********************************************/
	.bianjie {
		width: 100%;
		height: 100upx;
		// background:$bg;
		display: flex;
		padding-left: 20upx;

		&_logoimg {
			width: 60upx;
			height: 100%;
			padding: 20upx 10upx;

			.images {
				width: 40upx;
				height: 40upx;
			}
		}

		&_navigation {
			width: 100%;
			height: 100%;
			line-height: 36upx;

			.bianjie_text {
				font-weight: bold;
				font-size: 24upx;
				color: $texts;
			}

			.bianjie_English {
				font-size: 9px;
			}
		}
	}

	/********************** 选择菜单 ********************************************/
	//选中
	.ClickdownBack {
		background: $zuanzhong;
	}

	.ClickdownColor {
		color: white;
	}

	//其他
	.OutsideoneselfBack {
		background: white;
	}

	.OutsideoneselfColor {
		color: $texts;
	}

	// content__views  background

	// content_views_text  color
	/*******************************************/
	.martop {
		margin-top: 20upx;
	}

	.content {
		width: 100%;
		display: flex;

		.content_right_ {
			margin-left: 3%;
		}

		._left_views {
			border-radius: 16upx 0 0 16upx;
		}

		._right_views {
			border-radius: 0 16upx 16upx 0;
		}

		&_views {
			width: 49%;
			height: 180upx;
			border: 1px solid #edededd1;
			-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
			/* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;

			.content_views_img {
				width: 35%;
				height: 100%;
				padding-left: 7%;
				padding-top: 34upx;

				.images {
					width: 100upx;
					height: 100upx;
				}
			}

			.content_views_text {
				width: 64%;

				._views_text_val {
					font-weight: 600;
					font-size: 30upx;
					line-height: 142upx;
				}

				._views_text_english {
					line-height: 0px;
					position: relative;
					top: -38upx;
				}
			}
		}
	}
</style>
